<template>
    <div id="deposit">
        <div class="page-title">保证金</div>
        <div class="container">
            <div class="title">保证金管理</div>
            <div class="action">
                <div>
                    <div>保证金余额</div>
                    <div class="bottom">
                        <span>{{+baozhengjin_yue / 100}} 元</span>
                        <el-button type="primary" plain size="small" @click="out">转出</el-button>
                    </div>
                </div>
                <div>
                    <div>需缴纳</div>
                    <div class="bottom">
                        <span>{{+xu_jiaona / 100}} 元</span>
                        <el-button type="primary" plain size="small" @click="add">缴纳</el-button>
                    </div>
                </div>

            </div>
            <div class="m-t-md m-b-md tip">
                <p class="font-bold">保证金说明：</p>
                <div>
                    1,保证金主要用于消保赔付，同时分为【基础保证金】（必需缴纳）、【追加保证金】（自愿缴纳）<br>
                    2,基础保证金额度【0元】（暂不强制缴纳保证金），追加保证金额度【不限】（保证金总额超过0元的部分均视为追加保证金）<br>
                    3,保证金缴纳7天后，可申请关店【退保】，后7天观察期内无纠纷退还所有保证金余额（有纠纷待处理完后退还）<br>
                    4.交易金额达到2000元,需缴纳保证金200元.否则无法正常售卖商品!<br>
                </div>
            </div>
            <div class="title">保证金明细</div>
            <el-table
                    :data="tableData"
                    v-loading="loading"
                    style="width: 100%">
                <el-table-column
                        prop="create_time"
                        label="时间"
                >
                </el-table-column>
                <el-table-column
                        prop="leixing"
                        label="类型"
                >
                    <template v-slot="scope">
                        {{scope.row.leixing === 1 ? '缴纳' :'取出'}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="jine"
                        label="金额（元）">
                    <template v-slot="scope">
                        {{scope.row.jine / 100}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="beizhu"
                        label="备注">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'deposit',
        components: {},
        data() {
            return {
                tableData: [],
                baozhengjin_yue: 0,
                xu_jiaona: 0,
                loading: false
            }
        },
        computed: {},
        methods: {
            //充值
            add() {
                this.$prompt('请输入充值金额', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[1-9]\d*$|^[0-9]\d*.\d{1,2}$/,
                    inputErrorMessage: '请输入正确的金额',
                    beforeClose: (action, instance, done) => {
                        let value = instance.$children[0].value;
                        if (action === 'confirm') {
                            if (/^[1-9]\d*$|^[0-9]\d*.\d{1,2}$/.test(value)) {
                                console.log(value);
                                instance.confirmButtonLoading = true;
                                instance.confirmButtonText = '充值中...';

                                this.$axios.post(`/api/user/jiaona_baoxianjin`, {jiaonai_jine: value})
                                    .then(res => {
                                        if (res.code === `200`) {
                                            this.$message.success('缴纳成功');
                                            this.getInfo();
                                            done();
                                        }
                                    }).finally(() => {
                                    instance.confirmButtonLoading = false;
                                    instance.confirmButtonText = '确认';
                                })
                            }

                        } else {
                            done();
                        }
                    }
                }).then((a) => {
                }).catch(() => {
                })
            },
            //转出
            out(){
                this.$axios.post(`/api/user/jiedong_baoxianjin`)
                    .then(res =>{
                        if(res.code === `200`){
                            this.$message.success(res.msg);
                            this.getInfo()
                        }
                    })
            },
            //获取默认信息
            getInfo() {
                this.loading = true;
                this.$axios.post(`/api/user/baozhengjin_get`)
                    .then(res => {
                        if (res.code === `200`) {
                            let {baozhengjin_yue, xu_jiaona, baozhengjin_log} = res.data.data;
                            this.tableData = baozhengjin_log;
                            this.baozhengjin_yue = baozhengjin_yue;
                            this.xu_jiaona = xu_jiaona;
                        }
                    }).finally(() => {
                    this.loading = false;
                })
            },

        },
        created() {
            this.getInfo();
        },
    }
</script>

<style lang="less" scoped>
    #deposit {
        .title {
            background-color: #F0F5FF;
            padding: 8px 15px;
        }
        .action {
            width: 800px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #eee;
            & > div {
                width: 100%;
            }
            & > div:last-child {
                text-align: left;
                border-left: 1px solid #eee;
                margin-left: 20px;
                padding-left: 20px;
            }
            .bottom {
                margin: 25px 0;
                display: flex;
                justify-content: space-between;
                span {
                    font-size: 18px;
                    font-weight: bold;
                }

            }
        }
        .tip {
            div {
                line-height: 2;
            }
        }
    }
</style>
